<li v-for="(todo, index) in filteredAndSortedTodos" :key="todo.id" 
    :class="['todo-item', { 'completed': todo.completed, 'editing': todo.id === editingTodoId, 'selected': selectedTodos.includes(todo.id) }]"
    @click="(event) => handleTodoItemClick(event, todo)"
    @dblclick.stop="() => handleTodoItemDblClick(todo)"
    @contextmenu.prevent="(event) => openContextMenu(event, todo)">
  <input 
    type="checkbox" 
    :checked="todo.completed" 
    @change.stop="() => toggleTodoCompletion(todo.id)" 
    @click.stop // Prevent dblclick from firing on checkbox
    class="checkbox-style"
  />
  <div class="todo-content-wrapper">
    <span 
      v-if="!editingTodoId || editingTodoId !== todo.id" 
      class="item-text"
      :title="todo.text" 
    >
      {{ todo.text }}
    </span>
    <input 
    // ... existing code ...
<style lang="scss" scoped>
// ... existing styles ...

.todo-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-base) var(--spacing-md);
  background-color: var(--d-card-bg); 
  // border: 1px solid var(--d-border-primary);
  border-radius: var(--border-radius-base);
  margin-bottom: var(--spacing-sm);
  cursor: default; 
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  position: relative;
  border-bottom: 1px solid var(--d-border-primary-color); /* Added bottom border */
}

.todo-item:last-child {
  /* Optionally remove border for the last item if desired, or adjust margin */
  /* border-bottom: none; */ 
}

// ... existing styles ...

.item-text {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--spacing-xs); 
  // Title attribute for tooltip is now bound in the template
}

// ... existing styles ...
</style> 